<template>
  <n-form ref="formRef" :model="model" style="border-radius: 10px; background-color: aliceblue; padding: 20px;">
     
    <div style="color:#ff0000;" v-if="errRef=='验证成功'">验证成功</div>
    <div style="color:#00ff00;" v-else-if="errRef=='验证失败'">验证失败</div>
    <div style="color:#000000;" v-else>请登录验证</div>
 ------------------
    <div style="color:#ff0000;" v-show="errRef=='验证成功'">验证成功</div>
    <div style="color:#00ff00;" v-show="errRef=='验证失败'">验证失败</div>
    <div style="color:#000000;" v-show="errRef==''">请登录验证</div>

------------------------
    <div v-for="(item,index) in itemRef" :key="item.name">
     {{ index }} {{ item.name }}
    </div>

    <n-form-item path="username"  :label="propRef">
      <n-input v-model:value="model.username" @keydown.enter.prevent />
    </n-form-item>
  
    <n-form-item path="password" label="密码">
      <n-input
        v-model:value="model.password"
        type="password" 
        @keydown.enter.prevent
      />
    </n-form-item>
    <n-form-item
      ref="rPasswordFormItemRef"
      first
      path="reenteredPassword"
      label="重复密码"
    >
      <n-input
        v-model:value="model.reenteredPassword"
        :disabled="!model.password"
        type="password"
        @keydown.enter.prevent
      />
    </n-form-item>
    <n-row :gutter="[0, 24]">
      <n-col :span="24">
        <div style="display: flex; justify-content: flex-end">
          <n-button
            :disabled="model.username === null" 
            type="primary"
            @click="handleValidateButtonClick"
          >
            登录
          </n-button>
        </div>
      </n-col>
    </n-row>
  </n-form>

  <pre>{{ JSON.stringify(model, null, 2) }}
</pre>
</template>

<script lang="ts">
import type { FormInst, FormItemInst, FormItemRule, FormRules } from 'naive-ui'
 
import { defineComponent, ref } from 'vue'

interface ModelType {
  username: string | null
  password: string | null
  reenteredPassword: string | null
}

export default defineComponent({
  setup() {
    
    const errRef = ref<String>('')
    const itemRef = ref<[]>([])
    const propRef = ref<String>("用户")
    const formRef = ref<FormInst | null>(null)
    const rPasswordFormItemRef = ref<FormItemInst | null>(null)
      console.log(propRef.value)
    const modelRef = ref<ModelType>({
      username: null,
      password: null,
      reenteredPassword: null
    })
    function validatePasswordStartWith(
      rule: FormItemRule,
      value: string
    ): boolean {
      return (
        !!modelRef.value.password
        && modelRef.value.password.startsWith(value)
        && modelRef.value.password.length >= value.length
      )
    }
    function validatePasswordSame(rule: FormItemRule, value: string): boolean {
      return value === modelRef.value.password
    }

    itemRef.value.push({
      name:"第一个"
    })

    itemRef.value.push({
      name:"第二个"
    })

    return {
      itemRef,
      errRef,
      propRef,
      formRef,
      rPasswordFormItemRef,
      model: modelRef, 
      handlePasswordInput() {
        if (modelRef.value.reenteredPassword) {
          rPasswordFormItemRef.value?.validate({ trigger: 'password-input' })
        }
      },
      handleValidateButtonClick(e: MouseEvent) {
        e.preventDefault()
        console.log(modelRef.value)
        if(modelRef.value.password == modelRef.value.reenteredPassword) {
           console.log("验证成功")
           errRef.value = "验证成功"
           itemRef.value.push({
            name:"登录成功+1"
           })
        } else {
          // alert("验证失败")
          errRef.value = "验证失败"
          itemRef.value.push({
            name:"登录成功-1"
           })
        }
        // formRef.value?.validate((errors) => {
        //   if (!errors) {
        //     console.log('验证成功')
        //   }
        //   else {
        //     console.log(errors) 
        //   }
        // })
      }
    }
  }
})
</script>